<template>
	<view class="container">
		<view class="content">
			<view class="item title">挂号详细</view>
			<view class="item">挂号流水：<span class="item-content">{{RegistrationList.regId}}</span></view>
			<view class="item">就诊人：<span class="item-content">{{RegistrationList.patientName}}</span></view>
			<view class="item">预约日期：<span class="item-content">{{RegistrationList.visitDate}}</span></view>
			<view class="item">预约时间：<span
					class="item-content">{{getsubsectionType(RegistrationList.subsectionType)}}</span></view>
			<view class="item">就诊时间：<span class="item-content">{{getJzTime(RegistrationList.updateTime)}}</span></view>
			<view class="item">就诊状态：<span class="item-content">{{getRegStatus(RegistrationList.regStatus)}}</span>
			</view>
			<view class="item">就诊医生：<span class="item-content">{{RegistrationList.doctorName}}</span></view>
			<view class="item">就诊科室：<span class="item-content">{{getDeptName(RegistrationList.deptId)}}</span></view>
			<view class="item">挂号费用：<span class="item-content">{{RegistrationList.regItemAmount+"/元"}}</span></view>
			<view class="item">挂号类型：<span
					class="item-content">{{getSchedulingType(RegistrationList.schedulingType)}}</span></view>
			<view class="item">挂号编号：<span class="item-content">{{RegistrationList.regNumber}}</span></view>
			<view v-show="showLabel">
				<button v-if="RegistrationList.regStatus == 0" class="yybtn"
					@click="continuePayment(RegistrationList.regId)"
					style="margin-top: 36px;background-color: #FF5800">继续缴费</button>
				<button class="yybtn" :style="{ 'margin-top': RegistrationList.regStatus != 0 ? '36px' : '10px' }"
					@click="qxyy(RegistrationList.regId)">取消预约</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRegistrationById,
		doReturn,
		doInvalid
	} from '../../api/registration/index.js'
	import {
		collectFee
	} from '@/api/registration/index.js'
	export default {
		data() {
			return {
				RegistrationList: {},
				date: new Date(),
				showLabel: false,
			}
		},
		async onLoad() {
			const regStatus = uni.getStorageSync('regStatus')
			if (regStatus == 0 || regStatus == 1) {
				this.showLabel = true
			}
			getRegistrationById(uni.getStorageSync('regId')).then(res => {
				this.RegistrationList = res.data
			})
		},
		methods: {
			getJzTime(jzTime) {
				const year = this.date.getFullYear();
				const month = String(this.date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以要加 1，并且补零
				const day = String(this.date.getDate()).padStart(2, '0');
				const formattedDate = `${year}-${month}-${day}`;
				return formattedDate;
			},
			getsubsectionType(subsectionType) {
				if (subsectionType == 1) {
					return "上午"
				} else if (subsectionType == 2) {
					return "下午"
				} else if (subsectionType == 3) {
					return "晚上"
				}
			},
			getSchedulingType(schedulingType) {
				if (schedulingType == 1) {
					return "门诊"
				} else if (schedulingType == 2) {
					return "门诊+病例表"
				} else if (schedulingType == 3) {
					return "急诊"
				} else if (schedulingType == 4) {
					return "急诊+病例表"
				}
			},
			getDeptName(deptId) {
				if (deptId == 101) {
					return "内科"
				} else if (deptId == 102) {
					return "外科"
				} else if (deptId == 103) {
					return "儿科"
				} else if (deptId == 104) {
					return "妇科"
				} else if (deptId == 105) {
					return "眼科"
				} else if (deptId == 106) {
					return "耳鼻喉科"
				} else if (deptId == 107) {
					return "口腔科"
				} else if (deptId == 108) {
					return "皮肤科"
				}
			},
			getRegStatus(regStatus) {
				if (regStatus == 0) {
					return "未收费"
				} else if (regStatus == 1) {
					return "待就诊"
				} else if (regStatus == 2) {
					return "就诊中"
				} else if (regStatus == 3) {
					return "就诊完成"
				} else if (regStatus == 4) {
					return "已退号"
				} else if (regStatus == 5) {
					return "作废"
				}
			},
			continuePayment(regId) {
				uni.showModal({
						title: '提示',
						content: '确定继续缴费吗？',
						success: (res) => {
							if (res.confirm) {
								//继续缴费
								collectFee(regId).then(res => {
										if (res.data == null) {
											uni.showToast({
												title: '缴费成功',
												icon: 'success'
											}),
											setTimeout(function() {
												uni.reLaunch({
													url: '/pages/historyGH/index'
												})
											}, 1000)
										} else {
											uni.showToast({
												title: '缴费失败',
												icon: 'none'
											});
										}
									})
								} else if (res.cancel) {
									uni.showToast({
										title: '取消缴费',
										icon: 'none'
									})
								}
							}
						})
					},
					//取消预约
					qxyy(regId) {
						uni.showModal({
							title: '提示',
							content: '确定取消预约吗？',
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确定');
									if (this.RegistrationList.regStatus == 0) {
										doInvalid(regId).then(res => {
											if (res.data == null) {
												uni.showToast({
													title: '取消成功',
													icon: 'success'
												})
												setTimeout(function() {
													uni.reLaunch({
														url: '/pages/historyGH/index'
													})
												}, 1000)
											} else {
												uni.showToast({
													title: '取消失败',
													icon: 'none'
												})
											}
										})
									} else {
										doReturn(regId).then(res => {
											if (res.data == null) {
												uni.showToast({
													title: '取消成功',
													icon: 'success'
												})
												setTimeout(function() {
													uni.reLaunch({
														url: '/pages/historyGH/index'
													})
												}, 1000)
											} else {
												uni.showToast({
													title: '取消失败',
													icon: 'none'
												})
											}
										})
									}
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}
				}
			}
</script>

<style lang="scss">
	.container {
		background-color: #F4F4F6;
		width: 100%;
		height: 100vh;
	}

	.content {
		padding-top: 10px;
	}

	page {
		.item {
			height: 35px;
			line-height: 35px;
			margin: 5px 15px;
			padding-left: 10px;
			font-size: $font-size-sm;
			color: #333333;
			background-color: white;
		}

		.yybtn {
			margin-top: 10px; // 修改此值缩小按钮间距
			background-color: #528EFC;
			color: white;
			width: 80%;
		}

		.title {
			font-size: 15px;
			font-weight: bold;
			background-color: #E2E2E2;
		}

		.GhDetail {
			color: #3F80FF;
			text-align: center;
			height: 45px;
			line-height: 45px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.item-content {
			float: right;
			margin-right: 10px;
			color: #6A6A6A;
			font-size: $font-size-sm;
		}
	}
</style>